<template>
  <div class="container">
    <!-- 头部的 -->
    <el-row type="flex" class="row-bg" justify="space-between">
      <el-col :span="3">
        <div class="grid-content bg-l">
          <img src="../../assets/Verification/pal  logo.png" alt />
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-r">
          <div class="bg-box">
            <img src="../../assets/Verification/phone.png" alt />
          </div>
          <div class="contus">
            <span>全国服务热线</span>
            <font>400-716-2588</font>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 标题部分 -->
    <el-row>
      <el-col :span="3">
        <div class="grid-content bg-purple-dark">
          <p></p>
        </div>
      </el-col>
      <el-col :span="3">
        <div class="grid-content bg-purple-dark">
          <p>欢迎注册SPF-Pal平台</p>
        </div>
      </el-col>
    </el-row>
    <!-- steps条 -->
    <el-steps
      :active="1"
      align-center
      finish-status="success"
      simple
      style="margin-top: 52px;width:63%;margin-left:300px"
    >
      <el-step title="账号注册"></el-step>
      <el-step title="完善资料"></el-step>
      <el-step title="注册成功"></el-step>
    </el-steps>
    <!-- 注册表单 -->
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" class="el-form">
      <el-form-item prop="phone">
        <el-input
          prefix-icon="el-icon-mobile-phone"
          v-model="ruleForm.phone"
          @blur="getPhone"
          autofocus="autofocus"
          placeholder="请输入手机号"
          style="width:300px"
        ></el-input>
        <!-- {{ruleForm.phone}} -->
      </el-form-item>
      <el-form-item style="width:820px" prop="brush">
        <el-input
          prefix-icon="el-icon-brush"
          v-model="ruleForm.brush"
          placeholder="请输入右侧验证码"
          style="width:300px"
        ></el-input>
        <img class="imgcode" :src="imgcodeSrc" />
        <el-button
          @click="getNewcodeImg()"
          type="primary"
          style="margin-left:10px"
          size="small"
        >看不清换一张</el-button>
      </el-form-item>
      <!-- //短信的验证码 -->
      <el-form-item style="width:820px" prop="checknum">
        <el-input
          prefix-icon="el-icon-circle-check"
          v-model="ruleForm.checknum"
          placeholder="请输入短信验证码"
          style="width:300px"
        ></el-input>
        <el-button
          @click="getSMS()"
          type="primary"
          v-model="ruleForm.sendPhoneText"
          :disabled="ruleForm.isSendPhone"
          style="margin-left:10px"
          size="small"
        >{{this.ruleForm.sendPhoneText}}</el-button>
      </el-form-item>
      <!-- //两次确定密码 -->
      <el-form-item prop="pass">
        <el-input
          type="password"
          @focus="getIScode()"
          style="width:300px"
          prefix-icon="el-icon-lock"
          autocomplete="new-password"
          placeholder="请输入6位以上数学和字母组合"
          v-model="ruleForm.pass"
        ></el-input>
      </el-form-item>
      <el-form-item prop="checkPass">
        <el-input
          type="password"
          style="width:300px"
          prefix-icon="el-icon-lock"
          placeholder="请确认密码，再输入一遍"
          v-model="ruleForm.checkPass"
          autocomplete="new-password"
        ></el-input>
      </el-form-item>
      <el-form-item style="width:820px">
        <el-button type="primary" style="width:300px" @click="submitForm()">下一步</el-button>
        <!-- <el-button @click="resetForm('ruleForm')">重置密码</el-button> -->
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass')
        }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.ruleForm.pass) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      ruleForm: {
        pass: '',
        checkPass: '',
        phone: '',
        brush: '',
        checknum: '',
        isSendPhone: false,
        sendPhoneText: '发送验证码'
      },
      rules: {
        pass: [{ validator: validatePass, trigger: 'blur' }],
        checkPass: [{ validator: validatePass2, trigger: 'blur' }],
        pass: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        checkPass: [{ required: true, message: '请确认密码', trigger: 'blur' }],
        phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
        brush: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
        checknum: [
          { required: true, message: '请输入短信验证码', trigger: 'blur' }
        ]
      },
      active: 0,
      list: {},
      dataSMS: {},
      imgcodeSrc: '',
      timestamp: '',
      getIScodeList: {}
    }
  },

  methods: {
    next() {
      if (this.active++ > 3) this.active = 0
    },
    submitForm() {
      this.getCookieList()
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.$router.push('/registersetp2')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    //第一个input失去焦点时触发,发送手机是否被注册过
    async getPhone() {
      this.list = {
        mobile: this.ruleForm.phone,
        useType: '01'
      }
      this.getInputValue()
      const { data: res } = await this.$http.post(
        'sys/no-limit/validate/phone',
        this.list
      )
      if (res.code != 0) {
        return this.$message.error(res.msg)
      }
      console.log(res)
    },
    //获取输入框的手机号
    getInputValue() {
      console.log(this.ruleForm.phone) //(点一下)失去焦点才能获取到
      console.log(this.ruleForm.brush)
      this.list.mobile = this.ruleForm.phone
    },
    //获取右侧验证码
    // async getRightCode() {
    //   //这里不需要请求
    // },
    //获取手机短信验证码
    async getSMS() {
      this.dataSMS = {
        businessType: 'v_c_regist__',
        receiverAccount: this.ruleForm.phone,
        selfValidate: false,
        stamp: this.timestamp,
        validateCode: this.ruleForm.brush
      }
      console.log(this.dataSMS)
      const { data: res } = await this.$http.post(
        'sys/no-limit/send/mobile/code',
        this.dataSMS
      )
      this.ruleForm.isSendPhone = true
      var s = 60
      this.ruleForm.sendPhoneText = '重新获取(' + s + 's)'
      var that=this
      var timer = setInterval(function() {
        if (s > 0) {
          that.ruleForm.sendPhoneText = '重新获取(' + s + 's)'
        } else {
          that.ruleForm.isSendPhone = false
          that.ruleForm.sendPhoneText = '发送验证码'
          clearInterval(timer)
        }
        --s
      }, 1000)

      if (res.code != 0) {
        return this.$message.error(res.msg)
      }
      console.log(res)
    },
    //获取随机6位数----当前时间戳
    getRandom() {
      this.timestamp = ''
      this.timestamp = new Date().getTime()
      this.imgcodeSrc = '/api/sys/no-limit/picture/code/' + this.timestamp
      console.log(this.imgcodeSrc)
    },
    // 重新获取右侧图片
    getNewcodeImg() {
      this.getRandom()
      var timestamp = new Date().getTime()
      console.log(timestamp)
    },
    //判断验证码是否正确
    async getIScode() {
      console.log(this.ruleForm.checknum)
      this.getIScodeList = {
        businessType: 'v_c_regist__',
        receiverAccount: this.ruleForm.phone,
        selfValidate: false,
        stamp: this.timestamp,
        validateCode: this.ruleForm.brush,
        code: this.ruleForm.checknum
      }
      const { data: res } = await this.$http.post(
        'sys/no-limit/validate/mobile/code',
        this.getIScodeList
      )
      console.log(res)
    },
    // 设置cookie
    getCookieList() {
      //设置cookie,为第二页面的注册给数据
      let getIScodeList = this.getIScodeList
      window.localStorage.clear()
      //1注册的手机号
      window.localStorage.setItem('receiverAccount', this.ruleForm.phone)
      //2.收到的手机验证码
      window.localStorage.setItem('mobileValidateCode', this.ruleForm.checknum)
      //3.图片的验证码(右侧的)
      window.localStorage.setItem('picValidateCode', this.ruleForm.brush)
      //4.用户第一次输入的密码
      window.localStorage.setItem('password', this.ruleForm.pass)
      //5.用户确认后的密码
      window.localStorage.setItem('confirmPassword', this.ruleForm.checkPass)
      //6.图片验证码的stamp值
      window.localStorage.setItem('stamp', this.timestamp)
    },
    getRegterMessageListCookie() {
      // this.ruleForm.pass = window.localStorage.getItem('password')
      // this.ruleForm.checkPass = window.localStorage.getItem('confirmPassword')
      this.ruleForm.phone = window.localStorage.getItem('receiverAccount') //手机号
      // this.ruleForm.brush = window.localStorage.getItem('picValidateCode') //图片内容
      // this.ruleForm.checknum = window.localStorage.getItem('mobileValidateCode') //手机验证码
    }
  },
  created() {
    this.getRegterMessageListCookie()
    this.getInputValue()
    // this.getIScode()
    this.getRandom()
    // this.getSMS()
  }
}
</script>
<style lang="less" scoped>
.container {
  background-color: #eff3f8;
  height: 920px;
}
.row-bg {
  background-color: #f2f2f2;
  box-shadow: 0px 0px 16px 0px rgba(74, 74, 74, 0.5);
}
.bg-l,
.bg-r {
  margin-top: 28px;
  margin-left: 63px;
}
.bg-r {
  // width: 100%;
  height: 41px;
  .bg-box {
    float: left;
  }
  .contus {
    float: left;
  }
}
.bg-r img {
  display: inline-block;
  width: 40px;
  height: 41px;
}
span {
  display: block;
  width: 90px;
  height: 15px;
  font-size: 15px;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  color: rgba(82, 82, 82, 1);
  margin-top: -3px;
  margin-left: 5px;
}
font {
  display: block;
  height: 19px;
  font-size: 24px;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  color: rgba(19, 120, 218, 1);
  line-height: 14px;
  margin-top: 11px;
  margin-left: 5px;
}
p {
  width: 186px;
  height: 18px;
  font-size: 19px;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  color: rgba(85, 85, 85, 1);
  line-height: 20px;
  margin-top: 40px;
}
.el-form {
  width: 500px;
  margin: auto;
  margin-top: 120px;
}
.demo-ruleForm {
  margin-top: 0px;
  margin-left: -20px;
}
.imgcode {
  position: relative;
  left: 4px;
  top: 10px;
}
</style>
